<template>
    <section class="settingBigBox">
        <section class="wordBigBox" v-if="itemObj.icon == 'n3'">
            <!-- <div class="title">{{ itemObj.text }}</div> -->
            <a-input-search class="search-option" @change="changeSearch" allow-clear
                :style="{ width: '248px', borderRadius: '4px', marginLeft: '24px' }" v-model:value="wordKey" enter-button
                @search="searchHandle" placeholder="请输入关键字查询" />
            <div class="allRoleBox">
                <!-- <a-dropdown :overlayStyle="{ width: '104px', height: '34px', padding: '8px' }">
                    <div class="roleName">{{ sleRole }}<img src="../../assets/img/live/down.png" alt="" /></div>
                    <template #overlay>
                        <a-menu>
                            <a-menu-item v-for="(item, index) in roleList" :key="index" @click="choosedRole(item)">
                                <span class="dropItem">{{ item }}</span>
                            </a-menu-item>
                        </a-menu>
                    </template>
                </a-dropdown> -->
            </div>
            <div v-if="wordShowList.length" class="wordBox">
                <!-- <virtual-list ref="VirtualListEle" :data-key="'id'" class="wordBox1 updateScroollStyle" :extra-props="{ sleRole }" :estimate-size="80" :data-sources="wordShowList" :data-component="WordItem" /> -->
                <div class="wordBox1 updateScroollStyle">
                    <div class="wrap">
                        <div v-for="(item, idx) in wordShowList">
                            <WordItem :index="idx" :source="item" />
                        </div>
                    </div>
                </div>
            </div>

            <Emptys v-if="!wordShowList.length" style="margin: 0 auto;" />
        </section>
        <section v-if="itemObj.icon == 'n1'">
            <!-- <div class="title">{{ itemObj.text }}</div> -->
            <!-- <div>人脸分析</div> -->
            <div v-if="faceList.length" class="face-wrapper">
                <div class="faceBox" :class="{ active: index == faceCurrent }" v-for="(item, index) in faceList"
                    :key="index" @click="selectFace(index)">
                    <div class="close" @click.prevent.stop="selectFaceClose(index)"><img
                            src="../../assets/img/live/face-close.png" alt="" /></div>
                    <div class="faceConent">
                        <img v-if="item.only_face_image_url" :src="item.only_face_image_url" />
                        <img v-else src="@/assets/img/home2.0/avatar.png" />
                        <div class="content">
                            <form @submit.prevent.stop="selectFaceClose(index)" v-if="index == faceCurrent" class="names">
                                <input v-model="item.newName" class="ant-input" />
                            </form>
                            <div v-else class="names">{{ item.face_name }}</div>
                            <div class="times">出现时长：{{ parseTime(flagTime + item.durationInSecond * 1000, '{h}:{i}:{s}') }}
                            </div>
                            <div class="times">
                                出场率：<span>{{ (item.appearance_rate * 100).toFixed(2) }} %</span>
                            </div>
                        </div>
                    </div>
                    <div class="timeLineNumberBox">
                        <div v-for="(inner, idx) in item.positions" :key="idx" class="numberShip"
                            :style="{ width: `${(inner.end - inner.start) / item.durationInSecond * 100}%`, left: `${inner.start / item.durationInSecond * 100}%` }"
                            @click.stop.prevent="handleFaceShot(inner.start)">
                        </div>
                    </div>
                </div>
            </div>
            <Emptys v-else style="margin: 0 auto;" />
        </section>
        <section v-if="itemObj.icon == 'n2'" class="wordBigBox">
            <!-- <div class="title">{{ itemObj.text }}</div> -->
            <div v-if="zhenList.length" class="boxsieb updateScroollStyle key-frame-wrapper">
                <div class="key-frames">
                    <div class="zhenItem2" v-for="(item, index) in zhenList" :key="index"
                        :class="{ active: currentFrame == index }" @click="foucsZhen(index)">
                        <div class="tipBox">
                            <div class="tipLeftBox">
                                <img src="../../assets/img/live/qp.png" alt="" />
                                <span>{{ parseTime(item.time, '{h}:{i}:{s}') }}</span>
                            </div>
                            <a-popconfirm title="该操作不可逆，确认删除关键帧?" ok-text="删除" cancel-text="取消" @confirm="confirm(index)">
                                <img @click.stop class="closeIcon" src="../../assets/img/live/close.png" alt="" />
                            </a-popconfirm>
                        </div>
                        <img class="imgs" :src="item.pic" alt="" />
                    </div>
                </div>
            </div>
            <Emptys v-if="!zhenList.length" style="margin: 0 auto;" />
        </section>
        <section v-if="itemObj.icon == 'n0'" class="wordBigBox">
            <!-- <div class="title">{{ itemObj.text }}</div> -->
            <div v-if="pdList.length" class="boxsieb updateScroollStyle shot-box"
                :style="{ height: pdList && pdList.length >= 6 ? 'calc(100vh - 300px)' : 'initial' }">
                <div class="pdBox" v-for="(item, index) in pdList" :key="index" @click="foucsShot(index, item)">
                    <div class="zhenItem mb0 zhenItem1 shot-item" :class="{ active: index == shotCurrent }"
                        @click="shotCurrent = index">
                        <img :src="item.key_frame_url" class="myVideo" />
                        <div class="shot-info">
                            <p>镜头{{ index + 1 }}</p>
                            <span>
                                {{ parseTime(Number(item.start) * 1000 + flagTime, '{h}:{i}:{s}') }}-
                                {{ parseTime(Number(item.end) * 1000 + flagTime, '{h}:{i}:{s}') }}
                            </span>
                            <div class="timeLineNumberBox">
                                <div class="numberShip"
                                    :style="{ width: `${(item.end - item.start) / duration * 100}%`, left: `${item.start / duration * 100}%` }">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <Emptys v-if="!pdList.length" style="margin: 0 auto;" />

            <div class="downBox" v-if="choosePdIndex.length">
                <div class="downsBtn" @click="downVideoHandle">下载片段</div>
                <div class="downsBtn createVideo" @click="jumpLinkVideo">制作视频</div>
            </div>
        </section>
        <section v-if="itemObj.icon == 'n4'" class="wordBigBox">
            <!-- <div class="title">{{ itemObj.text }}</div> -->
            <div v-if="imageTextList.length" class="boxsieb updateScroollStyle timeline-wrapper">
                <ul class="time-line">
                    <li v-for="item in imageTextList" :key="item.id" class="time-item">
                        <span class="time-dot"><i /></span>
                        <p>{{ parseTime(flagTime + item.timestamp * 1000, '{h}:{i}:{s}') }}</p>
                        <div class="time-content" @click.stop.prevent="handleFaceShot(item.timestamp)">
                            <p v-for="inner in item.words" :key="inner">
                                {{ inner.word }}({{ (inner.confidence).toFixed(2) }}%)
                            </p>
                        </div>
                    </li>
                </ul>
            </div>
            <Emptys v-if="!imageTextList.length" style="margin: 0 auto;" />
        </section>

        <CreateVideoMotal ref="videoMotalEle" :liveId="liveId" :choosePdList="choosePdList" />
    </section>
</template>

<script setup lang="ts">
import { onMounted, ref, nextTick, onBeforeUnmount, watchEffect, computed, onUnmounted } from 'vue';
import { useRouter } from 'vue-router';
import { useUserStore } from '@/store/user';
import { message } from 'ant-design-vue';

import useCollectFetch from '@/hooks/useCollectFetch';
import useDownVideo from '@/hooks/useDownVideo';
import useCopyTemplateUrl from '@/hooks/useCopyTemplateUrl';
import Emptys from './Emptys.vue';

import CreateVideoMotal from './CreateVideoMotal.vue';
import { parseTime } from '@/utils/index';
import { deletebyId, getWordList, collectById, uncollectById, changeRole, changeEditName } from '@/utils/api-utils';
import VirtualList from 'vue3-virtual-scroll-list';
import WordItem from './WordItem.vue';

import {
    personFace,
    editPersonFace,
    seachAudioText,
    shotAnalysis
} from '@/utils/audioVideo';

const props = defineProps({
    itemObj: {
        type: Object as any,
        default: () => { }
    },
    zhenList: {
        type: Array as any,
        default: () => { }
    },
    pdList: {
        type: Array as any,
        default: () => { }
    },
    liveId: {
        type: String,
        default: ''
    },
    type: {
        type: Number,
        default: 2
    },
    duration: {
        type: Number,
        default: 0
    }
});
const router = useRouter();
const userStore = useUserStore();
const chengpList = ref<any>([]);
const choosePdList = ref<any>([]);
const choosePdIndex = ref<any>([]);
const wordList = ref<any>([]);
const wordShowList = ref<any>([]);
const roleList = ref<any>([]);
const sleRole = ref('全部角色');
const faceList = ref<any>([]);
const pdNameSle = ref<string>('');
const wordKey = ref('');
const wordTime = ref<any>(null);
const VirtualListEle = ref<any>(null);
const videoMotalEle = ref<any>(null);
const isClickText = computed(() => {
    return userStore.textInfo.index > -1;
});
const $emit = defineEmits(['deleteZhen', 'foucsTime', 'deletePd', 'textByTime', 'foucsShotTime', 'seekFace']);
const faceCurrent = ref<number>(-1);
const imageTextList = ref<any>([]);
const flagTime = Date.parse(parseTime(Date.now(), '{y}-{m}-{d}') + ' 00:00:00');
const currentFrame = ref<number>(-1);
const shotCurrent = ref<number>(-1);
onMounted(() => {
    if (props.type == 2 || props.type == 1) {
        fetchFaceList();
        window.addEventListener('scroll', handleScrollFace, true);
    }
    if (props.type == 2 || props.type == 1 || props.type == 4) {
        fetchImageText();
        window.addEventListener('scroll', handleScrollText, true);
    }
    if (props.type == 2 || props.type == 3) {
        fetchAudioList();
        window.addEventListener('scroll', handleScrollAudio, true);
    }
    // getchengpListHandle();

    //文字记录
    nextTick(() => {
        // getWordListHandle();
        //查询所有的角色
        // findAllRoleHandle();
    });
});

onUnmounted(() => {
    window.removeEventListener('scroll', handleScrollText);
    window.removeEventListener('scroll', handleScrollText);
});

//  人脸分析
const currentFace = ref(1);
const faceLoading = ref(false);
const fetchFaceList = () => {
    faceLoading.value = true;
    personFace({
        mediaResourceId: props.liveId,
        type: 'face',
        page: currentFace.value,
        pageSize: 10
    }).then(res => {
        faceLoading.value = false;
        if (res.data.status_code == '1') {
            if (res.data.result.data && (!res.data.result.data.items || res.data.result.data.items.length == 0)) {
                faceLoading.value = true;
                return;
            }
            faceList.value = faceList.value.concat(res.data.result.data.items);
            faceList.value = faceList.value.map((item: any) => {
                item['newName'] = item.face_name;
                return item;
            });
            currentFace.value++;
        }
    }).catch(error => console.log(error));
}

const handleScrollFace = () => {
    const container = document.querySelector('.face-wrapper');
    if (!container) return;
    const { scrollTop, scrollHeight, clientHeight } = container // 获取滚动高度和内容高度
    if (scrollTop + clientHeight >= scrollHeight && !faceLoading.value) {
        fetchFaceList() // 滚动到底部，加载更多数据
    }
}

// 图文分析
const currentText = ref(1);
const textLoading = ref(false);
const fetchImageText = () => {
    textLoading.value = true;
    personFace({
        mediaResourceId: props.liveId,
        type: 'imagetext',
        page: currentText.value,
        pageSize: 10
    }).then(res => {
        textLoading.value = false;
        if (res.data.status_code == '1') {
            if (res.data.result.data && (!res.data.result.data.items || res.data.result.data.items.length == 0)) {
                textLoading.value = true;
                return;
            }
            imageTextList.value = imageTextList.value.concat(res.data.result.data.items);
            currentText.value++;
        }
    }).catch(error => console.log(error));
}

const handleScrollText = () => {
    const container = document.querySelector('.timeline-wrapper');
    if (!container) return;
    const { scrollTop, scrollHeight, clientHeight } = container // 获取滚动高度和内容高度
    if (scrollTop + clientHeight >= scrollHeight && !textLoading.value) {
        fetchImageText() // 滚动到底部，加载更多数据
    }
}

// 音频分析
const currentAudio = ref(1);
const audioLoading = ref(false);
const fetchAudioList = () => {
    audioLoading.value = false;
    personFace({
        mediaResourceId: props.liveId,
        type: 'speech',
        page: currentAudio.value,
        pageSize: 10
    }).then(res => {
        audioLoading.value = false;
        if (res.data.status_code == '1') {
            if (res.data.result.data && (!res.data.result.data.items || res.data.result.data.items.length == 0)) {
                audioLoading.value = true;
                return;
            }
            for (let i in res.data.result.data.items) {
                wordShowList.value.push({
                    id: i,
                    role: '角色' + i,
                    content: res.data.result.data.items[i].speech_text,
                    startTime: flagTime + Number(res.data.result.data.items[i].positions[0].start) * 1000,
                    start: res.data.result.data.items[i].positions[0].start,
                    end: res.data.result.data.items[i].positions[0].end
                });
            }
            currentAudio.value++;
        }
    }).catch(error => console.log(error));
}

const changeSearch = () => {
    if (wordKey.value == '') {
        wordShowList.value = [];
        currentAudio.value = 1;
        fetchAudioList();
    }
};

const handleScrollAudio = () => {
    const container = document.querySelector('.wordBox1');
    if (!container) return;
    const { scrollTop, scrollHeight, clientHeight } = container // 获取滚动高度和内容高度
    if (scrollTop + clientHeight >= scrollHeight && !audioLoading.value) {
        fetchAudioList() // 滚动到底部，加载更多数据
    }
}

const selectFace = (data: number) => {
    faceCurrent.value = data;
}
// 人脸分析修改名字
const selectFaceClose = (index: number) => {
    editPersonFace({
        mediaResourceId: props.liveId,
        oldName: faceList.value[index].face_name,
        newName: faceList.value[index].newName,
        only_face_image_url: faceList.value[index].only_face_image_url,
        face_unique_code: faceList.value[index].face_unique_code
    }).then(res => {
        faceList.value[index].face_name = faceList.value[index].newName;
        faceCurrent.value = -1;
    });
}

const getchengpListHandle = () => {
    let data = {
        pageIndex: 1,
        pageSize: 20,
        reqBody: {
            pubStatus: null,
            collect: null,
            tags: [],
            cnt: '',
            startDate: '',
            endDate: '',
            creatorId: null
        }
    };
};

// 语音分析搜索
const searchHandle = async () => {
    // if (wordKey.value == '') {
    //     message.error('请输入搜索内容');
    //     return;
    // }
    seachAudioText({
        mediaResourceId: props.liveId,
        searchText: wordKey.value
    }).then(res => {
        if (res.data.status_code == '1') {
            wordShowList.value = [];
            if (!res.data.result.data.items && res.data.result.data.items.length == 0) return;
            for (let i in res.data.result.data.items) {
                wordShowList.value.push({
                    id: i,
                    role: '角色' + i,
                    content: res.data.result.data.items[i].speech_text,
                    startTime: flagTime + Number(res.data.result.data.items[i].positions[0].start) * 1000,
                    start: res.data.result.data.items[i].positions[0].start,
                    end: res.data.result.data.items[i].positions[0].end
                });
            }
        }
    }).catch(error => {
        console.log(error);
    });
};
const changeColorText = async () => {
    for (let index = 0; index < wordShowList.value.length; index++) {
        wordShowList.value[index].content = await removeBiaoHong(wordShowList.value[index].content);
        if (userStore.textInfo.index == index) {
            wordShowList.value[index].content = `<abbr style="color:#303133;background:rgba(13,134,255,0.2); font-weight: bold;" >${wordShowList.value[index].content}</abbr>`;
            $emit('textByTime', wordShowList.value[index].startTime);
        }
    }
};
const removeBiaoHong = async (word: any) => {
    var reg = /(<\/?abbr.*?>)/gi;
    var s = word.replace(reg, '').replace(/&amp;/gi, '&');
    return s;
};
const findAllRoleHandle = () => {

};
const choosedRole = (val: string) => {
    sleRole.value = val;
    wordShowListHandle();
};
const getWordListForTime = () => {
    // wordTime.value = setInterval(() => {
    //     getWordListHandle();
    // }, 10000);
};
const getWordListHandle = async () => {
    wordShowList.value = [];
    wordList.value = [];
    getWordList({ liveId: props.liveId })
        .then((res: any) => {
            console.log('文字记录');
            console.log(res);
            if (res.code == 1 && res.data.length) {
                wordList.value = [...res.data];
                //处理要显示的文字
                wordShowListHandle();
                console.log(wordList.value);
            }
        })
        .catch();
};

const wordShowListHandle = () => {
    wordShowList.value = [];
    if (sleRole.value == '全部角色') {
        wordShowList.value = [...wordList.value];
    } else {
        for (let i = 0; i < wordList.value.length; i++) {
            if (sleRole.value == wordList.value[i].role) {
                wordShowList.value = [...wordShowList.value, ...[wordList.value[i]]];
            }
        }
    }
};
const nameChangeHandle = (e: any) => {
    pdNameSle.value = e.target.value;
    console.log(pdNameSle.value);
};
const changeNameHandle = (row: any) => {
    console.log(row);
    if (pdNameSle.value == row.name) {
        return;
    }
    let obj = { editId: row.id, name: row.name };
    changeEditName(obj)
        .then((res: any) => {
            console.log(res);
            if (res.code == 1) {
                message.success('修改成功！');
            } else {
                message.error('修改失败，请重试！');
            }
        })
        .catch();
};
//收藏
const collecthandle = (row: any) => {
    let fetchs = uncollectById;
    if (!row.isCollected) {
        fetchs = collectById;
    }
    useCollectFetch(row, fetchs);
};
const jumpEdit = (row: any) => {
    router.push(`/home/edit/${row.id}`);
};
const publishHandle = (row: any) => {
    // 这是发布
};
const downVideo = (videoUrl: any, name: string) => {
    useDownVideo(videoUrl, name);
};
const downVideoHandle = () => {
    choosePdList.value.map((row: any) => {
        let title = row.name || row.id;
        useDownVideo(row.url, title);
    });
};
const jumpLinkVideo = () => {
    console.log('这里弹出视频制作');
    videoMotalEle.value.showVideoMotal();
};
const copyTemplateUrl = (url: string, title: string) => {
    useCopyTemplateUrl(url, title);
};

const choosePdHandle = (row: any) => {
    console.log(row);
    let i = choosePdList.value.findIndex((item: any) => {
        return item.id == row.id;
    });
    console.log(i);
    if (i < 0) {
        choosePdList.value = [...choosePdList.value, ...[row]];
        choosePdIndex.value = [...choosePdIndex.value, ...[row.id]];
    } else {
        choosePdList.value.splice(i, 1);
        choosePdIndex.value.splice(i, 1);
    }
    console.log(choosePdIndex.value);
};
const deletedVideo = (id: string) => {
    console.log(id);
    deletebyId({ id: id })
        .then((res: any) => {
            message.success('删除成功');
            getchengpListHandle();
        })
        .catch((err) => {
            console.log(err);
        });
};

const playHandle = (url: string) => {
    window.open(url);
};
const confirm = (index: number) => {
    console.log(index);
    currentFrame.value = -1;
    $emit('deleteZhen', index);
};
const confirmPd = (index: number) => {
    console.log(index);
    $emit('deletePd', index);
};
const foucsZhen = (index: number) => {
    console.log(index);
    currentFrame.value = index;
    $emit('foucsTime', index);
};

const foucsShot = (index: number, data: any) => {
    console.log(index);
    currentFrame.value = index;
    $emit('foucsShotTime', {
        index: index,
        ...data
    });
};

const handleFaceShot = (time: any) => {
    console.log(time);
    $emit('seekFace', time);
};

const videoShowHandle = (id: string) => {
    console.log(id);
    let el = document.getElementById(id) as any;
    el.play();
};
const videoCloseHandle = (id: string) => {
    let el = document.getElementById(id) as any;
    el.pause();
};
const changeRoleHandle = () => {
    let obj = { liveId: props.liveId, roleMap: { ...userStore.roleName } };
    changeRole(obj)
        .then((res: any) => {
            console.log('修改role');
            console.log(res);
            if (res.code == 1) {
                message.success('修改成功');
                if (Object.keys(userStore.roleName)[0] == sleRole.value) {
                    sleRole.value = userStore.roleName[sleRole.value];
                }
                findAllRoleHandle();
                getWordListHandle();

                userStore.updataRoleName(null);
            }
        })
        .catch((err) => {
            console.log(err);
        });
};
onBeforeUnmount(() => {
    clearInterval(wordTime.value);
    wordTime.value = null;
});

watchEffect(() => {
    if (isClickText.value) {
        nextTick(() => {
            console.log(userStore.textInfo);
            if (userStore.textInfo.key == 'dw') {
                $emit('textByTime', userStore.textInfo.startTime);
            }
        });
    }
    if (userStore.roleName) {
        changeRoleHandle();
    }
    // if (props.type == 3) {
    //     console.log(props.type);
    //     getWordListForTime();
    // }
});
</script>
<style scoped lang="scss">
@import '@/assets/css/topItem.scss';
@import './index.scss';

.settingBigBox {
    width: 100%;
    height: 100%;
    padding: 24px 0 24px 0;
    padding-bottom: 50px;
    box-sizing: border-box;
}

.title {
    font-size: 16px;
    font-family: AlibabaPuHuiTi_2_75_SemiBold;
    color: #303133;
    margin-bottom: 16px;
    padding-left: 24px;
}

.zhenItem2 {
    width: 124px;
    height: 76px;
    margin-bottom: 8px;
    border-radius: 4px;
    margin-left: 12px;
    position: relative;
    cursor: pointer;
    overflow: hidden;

    .imgs {
        display: block;
        margin: 3px auto;
        width: 116px;
        height: 68px;
        border-radius: 8px;
    }

    .xuanze {
        width: 34px;
        height: 34px;
        position: absolute;
        right: 0;
        bottom: 0;
        z-index: -1;
    }

    &:hover {
        background-color: #fff;
        box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.1);
        border-radius: 8px 8px 8px 8px;
        opacity: 1;
        border: 1px solid #E5E5E5;
    }

    &.active {
        border: 1px solid #F9601D;
        background-color: rgba($color: #F9601D, $alpha: 0.1);
    }
}

.zhenItem {
    width: 264px;
    height: 182px;
    margin-bottom: 4px;
    border-radius: 4px;
    margin-right: 16px;
    position: relative;
    cursor: pointer;
    overflow: hidden;

    .imgs {
        width: 100%;
        height: 100%;
        border-radius: 8px;
    }

    .xuanze {
        width: 34px;
        height: 34px;
        position: absolute;
        right: 0;
        bottom: 0;
        z-index: -1;
    }
}

.tipBox {
    width: 100%;
    height: 40px;
    border-radius: 0px 0px 8px 8px;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 8px 12px;
    z-index: 2;
}

.tipBox1 {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%);
}

.zhenItem1 {
    border: 4px solid #fff;
    padding: 8px;

    .timeLineNumberBox {
        width: 100%;
    }

    &:hover {
        background: #FFFFFF;
        box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.1);
        border-radius: 8px;
        opacity: 1;
        border: 1px solid #E5E5E5;
    }

    &.active {
        background: #F0E1DA;
        box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.1);
        border-radius: 8px;
        opacity: 1;
        border: 1px solid #F9601D;
    }

    &.shot-item {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        height: 84px;
        border-radius: 4px;
        margin: 4px 0;

        .shot-info {
            color: #303133;
            font-size: 12px;
            margin-left: 16px;

            >p {
                font-weight: bold;
            }

            >span {
                color: #909399;
                display: block;
                margin: 4px 0 16px;
            }
        }

        .myVideo {
            margin: 0;
            width: 116px;
            height: 68px;
            overflow: hidden;
            border-radius: 4px;
        }
    }
}

.zhenItemed {
    // box-sizing: content-box;
    // margin-left: -2px;
    border: 4px solid #67c23a;

    .xuanze {
        z-index: 1;
    }
}

.mb0 {
    margin-bottom: 4px;
}

.pdBox {

    position: relative;
}

.closeIcon {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.tipLeftBox {
    display: flex;
    align-items: center;
    font-size: 12px;
    font-family: AlibabaPuHuiTi_2_55_Regular;
    color: #ffffff;

    img {
        width: 10px;
        height: 10px;
        margin-right: 4px;
    }
}

.pdIpt {
    font-size: 12px;
    font-family: AlibabaPuHuiTi_2_55_Regular;
    color: #909399;
    padding-left: 4px;
}

.pdIpt:hover {
    color: #303133;
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.creatIngBox {
    width: 248px;
    height: 146px;
    background: #303133;
    border-radius: 8px;
    margin-top: 16px;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-family: AlibabaPuHuiTi_2_75_SemiBold;
    color: #9dec53;

    .loadingText {
        margin-top: -8px;
    }

    .errIocn {
        width: 129px;
        height: 76px;
        margin-bottom: 12px;
    }

    .timeAbslut {
        position: absolute;
        left: 20px;
        top: 8px;
        color: #ffffff;
    }
}

.creatIngBox1 {
    background: #f1f2f6;
    color: #909399;
}

.scle {
    transform: scale(0.4);
}

.closeIconLoading {
    position: absolute;
    width: 16px;
    height: 16px;
    cursor: pointer;
    top: 8px;
    right: 8px;
}

.boxsieb {
    overflow: hidden;
    height: calc(100% - 2px);
    overflow-y: auto;
    width: 100%;
    padding-left: 8px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;

    .zhenItem1 .tipBox {
        width: 248px;
        margin-left: 8px;
        margin-top: 8px;
    }

    &.key-frame-wrapper {
        display: block;
    }
}

.chengpinBox {
    width: 100%;
    margin-bottom: 16px;
    display: flex;
    justify-content: space-between;
}

.imgVideoBox {
    width: 116px;
    height: 206px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    overflow: hidden;
    position: relative;

    .thumbnail {
        width: 100%;
        height: 100%;
    }
}

.videoMotalBox {
    z-index: -1;
    width: 100%;
    height: 100%;
    position: absolute;
    background: rgba(0, 0, 0, 0.5);
    top: 0;
    left: 0;
}

.rightVideoBox {
    width: 116px;
    height: 206px;
    position: relative;
}

.titlev {
    font-size: 14px;
    font-family: AlibabaPuHuiTi_2_65_Medium;
    color: #303133;
    line-height: 16px;
    text-align: justify;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 4;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}

.publishIcon {
    position: relative;
    margin-top: 8px;

    font-size: 12px;
    font-family: AlibabaPuHuiTi_2_65_Medium;
    color: #909399;

    box-sizing: border-box;
    display: flex;
    align-items: center;
    z-index: 10;
    cursor: pointer;

    :deep(img) {
        width: 14px;
        height: 14px;
    }
}

:deep(.pubingIcon) {
    animation: rotate 1s linear infinite;
}

@keyframes rotate {
    0% {
        -webkit-transform: rotate(0deg);
    }

    25% {
        -webkit-transform: rotate(90deg);
    }

    50% {
        -webkit-transform: rotate(180deg);
    }

    75% {
        -webkit-transform: rotate(270deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    }
}

.platIcon {
    width: 32px;
    height: 32px;
    cursor: pointer;
    position: absolute;
    left: 50%;
    top: 50%;

    transform: translateX(-50%) translateY(-50%);
}

.footBoxV {
    position: absolute;
    bottom: 8px;
    width: 100%;
    display: flex;
    z-index: -1;
}

.editBoxBtn {
    width: 28px;
    // height: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-family: AlibabaPuHuiTi_2_55_Regular;
    color: #909399;
    border: none;
    margin-right: 16px;

    img {
        width: 14px;
        height: 14px;
        // margin-bottom: 2px;
    }
}

.itemmore {
    z-index: -1;
    width: 24px;
    height: 24px;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 4px;
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;

    img {
        width: 12px;
        height: 12px;
    }
}

.itemmore:hover {
    background: rgba(104, 104, 104, 0.5);
}

.chengpinBox:hover {
    .videoMotalBox {
        z-index: 9;
    }

    .itemmore {
        z-index: 9;
    }

    .footBoxV {
        z-index: 9;
    }
}

.downBox {
    width: 100%;
    height: 40px;

    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    background-color: #fff;

    justify-content: space-between;
    border-top: #ebeef5 1px solid;
    z-index: 5;

    .downsBtn {
        width: 148px;
        height: 40px;
        background: #ffffff;
        font-size: 14px;
        line-height: 40px;
        font-family: AlibabaPuHuiTi_2_55_Regular;
        color: #909399;
        text-align: center;
        cursor: pointer;
    }

    .createVideo {
        color: #ffffff;
        background: linear-gradient(90deg, #0eb6ff 0%, #0d73ff 51%, #6f78ff 100%);
    }
}

.wordBigBox {
    width: 100%;
    height: 100%;
}

.allRoleBox {
    height: 5px;
    border-bottom: 1px solid #ebeef5;
    padding-bottom: 8px;
    padding-top: 16px;
    width: 296px;
    position: absolute;
    left: 0;
    padding-left: 24px;

    .roleName {
        font-size: 12px;
        font-family: AlibabaPuHuiTi_2_55_Regular;
        color: #909399;
        display: flex;
        align-items: center;
        cursor: pointer;
        justify-content: left;

        img {
            width: 8px;
            height: 8px;
            margin-left: 4px;
        }
    }
}

.wordBox {
    margin-top: 60px;
    height: calc(100% - 88px);
    margin-left: 24px;
}

.wordBox1 {
    width: 272px;
    padding-right: 24px;
    height: 100%;
    overflow-y: auto;
}

.key-frames {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
}

.face-wrapper {
    height: calc(100vh - 210px);
    overflow: hidden;
    overflow-y: scroll;
}

.faceBox {
    width: 100%;
    // margin-bottom: 32px;
    padding: 16px 0 16px 24px;
    cursor: pointer;
    position: relative;

    .close {
        display: none;
    }

    &.active {
        box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.1);
        border-radius: 8px 8px 8px 8px;
        opacity: 1;
        border: 1px solid #E5E5E5;

        .close {
            display: block;
            position: absolute;
            top: 6px;
            right: 6px;
            width: 16px;
            height: 16px;

            >img {
                width: 100%;
            }
        }
    }
}

.faceConent {
    width: 100%;
    height: 64px;
    display: flex;
    justify-content: left;

    img {
        width: 64px;
        height: 64px;
        border-radius: 8px;
        margin-right: 12px;
    }
}

.content {
    .names {
        font-size: 14px;
        font-family: AlibabaPuHuiTi_2_65_Medium;
        color: #303133;
        margin-bottom: 6px;

        :deep() .ant-input {
            border-radius: 4px;
            box-sizing: border-box;
            margin: 0;
            padding: 2px 11px;
            color: rgba(0, 0, 0, 0.88);
            font-size: 14px;
            line-height: 1.25;
            list-style: none;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
            position: relative;
            display: inline-block;
            width: 88%;
            min-width: 0;
            background-color: #ffffff;
            background-image: none;
            border-width: 1px;
            border-style: solid;
            border-color: #d9d9d9;
            border-radius: 6px;
            transition: all 0.2s;
        }
    }

    .times {
        font-size: 12px;
        font-family: AlibabaPuHuiTi_2_55_Regular;
        color: #909399;

        span {
            color: #F9601D;
        }
    }
}

.timeLineNumberBox {
    width: 96%;
    height: 8px;
    background: #f7f8fa;
    border-radius: 4px;
    margin-top: 8px;
    position: relative;
    overflow: hidden;
}

.numberShip {
    width: 20px;
    height: 8px;
    background: #F9601D;
    border-radius: 4px;
    position: absolute;
    cursor: pointer;
}

:deep() .ant-input-search>.ant-input-group>.ant-input-group-addon:last-child .ant-input-search-button {
    border-radius: 0 4px 4px 0 !important;
}

:deep() .search-option>.ant-input-wrapper>.ant-input-affix-wrapper>.ant-input {
    border: 0 !important;
}

:deep() .search-option>.ant-input-wrapper>.ant-input-affix-wrapper {
    padding: 4px 11px !important;
}
</style>
@/utils/api-utils